<!DOCTYPE html>
<html>
<head>
	<title>공지사항</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<style>
	.top-wrapper { position: relative; }
		.top-wrapper a { display:block; }
		.top-wrapper div { position:absolute; left:0; top:20px; width:400px; }
		.top-wrapper div a { background:#999; border-bottom:1px solid black; color:#fff; padding:10px; }

	</style>
</head>
<body>
	<a href="#f">이전메뉴</a>
	
	<div class="top-wrapper" id="top_wrapper">
		<a href="#a">메뉴들</a>
		
		<div id="toggle" style="display:none;">
			<a href="#b">m1</a>
			<a href="#c">m2</a>
			<a href="#d">m3</a>
			<a href="#e">m4</a>
		</div>
	</div>
	<a href="#g">다음메뉴</a>
	<script type="text/javascript">
	(function(id, toggle_id) {
		var top_wrap = document.getElementById(id);
		var toggle = document.getElementById(toggle_id);
		
		function setSubFocuses() {
			var focusIn = false;
			var subFocuses = top_wrap.getElementsByTagName('a');
			console.log(subFocuses);

			for(var i = 0, len = subFocuses.length; i < len; i++) {
				
				addEvent(subFocuses[i], 'focus', function(e) {
					toggle.style.display = 'block';
					focusIn = true;
				});

				addEvent(subFocuses[i], 'mouseover', function(e) {
					toggle.style.display = 'block';
					focusIn = true;
				});

				addEvent(subFocuses[i], 'blur', function(e) {
					focusIn = false;
					setTimeout(function() {
						if(!focusIn) {
							toggle.style.display = 'none';
						}
					}, 200);
				});

				addEvent(subFocuses[i], 'mouseout', function(e) {
					focusIn = false;
					setTimeout(function() {
						if(!focusIn) {
							toggle.style.display = 'none';
						}
					}, 200);
				});
			}
		}
		
		setSubFocuses();

		function addEvent(element, evt, fnc) {
			if(window.attachEvent) {
				element.attachEvent('on'+evt,fnc);
			} else {
				element.addEventListener(evt,fnc);
			}
		}
	})('top_wrapper', 'toggle');
	</script>
</body>
</html>